<template>
<div>
  <div class="page-title" style="width:100%">按问题对应要素分析</div>
  <div class="page-content">
    <el-row>
          <el-form :model="filterQuery">
            <el-col :span="6">
              <el-form-item>
                <treeselect
                v-model="filterQuery.companyCode"
                :multiline="false"
                :options="company"
                placeholder="搜索受检单位"
                filterable
                clearable
                style="width:80%">
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-date-picker
                type="date"
                v-model="filterQuery.startDate"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 140px">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item
              label="至"
              label-width="100%">
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-date-picker
              type="date"
              v-model="filterQuery.endDate"
              placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 140px">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                v-model="filterQuery.round"
                placeholder="搜索轮次"
                filterable
                clearable
                style="width: 120px">
                <el-option
                v-for="item in round"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 80px" @click="getProblem">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 120px" @click="exportTable">导出Excel</el-button>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <div class="table">
          <el-table
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
          >
          <el-table-column
          type="index"
          label="序号"
          width="50%">
          </el-table-column>
          <el-table-column
          label="问题对应要素"
          prop="problemName">
          </el-table-column>
          <el-table-column
          label="问题数量（项）"
          prop="problemNum">
          </el-table-column>
          <el-table-column
          label="百分比（%）"
          prop="per">
          </el-table-column>
          <el-table-column
          type="selection">
          </el-table-column>
          </el-table>
          <el-button type="text" :icon="buttonIcon" @click="displayTable"></el-button>
          </div>
        </el-row>
        <el-row style="height: 20px">
        </el-row>
        <el-row>
            <div id="pieChart" style="width: 100%; height: 400px"></div>
        </el-row>
        <el-row>
            <div id="histogram" style="width: 100%; height: 500px;"></div>
        </el-row>
  </div>
</div>
</template>

<script>
import { GetCheckRound,
         GetSeverityProblem} from '../../../services/problemSeverityAnalysis'
import {GetCompany} from '../../../services/gettreedata'
import { compare,
        SelectionChange } from '../Function'
import { Pie,
         Histogram } from '../Charts'

export default {
  data() {
    return {
      filterQuery: {
        companyCode: '01',
        startDate: '',
        endDate: '',
        round: '',
        fieldName: 'HseFactor',
        fieldCode: '0049'
      },
      round: [],
      company: [],
      problem: {},
      percentage: [],
      array: [],
      legendData: [],
      pieData: [],
      histogramData: [],
      data: [],
      excelData: [],
      filterQueryExcel: {},
      unSelectData: [],
      tableData: [],
      isDisplayTable: false,
      buttonIcon: "el-icon-caret-bottom"
    }
  },
  mounted() {
    this.getCompany()
    this.getRound()
    this.getProblem()
    this.drawPie()
    this.drawHistogram()
  },
  methods: {
    getCompany() {
      GetCompany().then((res) => {
        this.company = res.data
        this.getProblem()
      })
    },
    getRound() {
      GetCheckRound().then((res) => {
        this.round = res.data
      })
    },
    handleSelectionChange(row) {
      this.unSelectData = SelectionChange(row,this.legendData)
    },
    getProblem() {
      GetSeverityProblem(this.filterQuery).then((res) => {
        this.problem = res.data.数量统计
        this.percentage = res.data.百分比统计
        this.monthData = res.data.月份统计
        // console.log(res.data)
        var j=0
        for(var i in this.problem) {
          this.array[j]= i
          this.legendData[j] = i
          j++
        }
        this.data = this.array
        this.array = this.array.map(item => {
            return {
              problemName: item,
              problemNum: this.problem[item],
              per: this.percentage[item]
            }
        })
        this.array.sort(compare)
        this.tableData = this.array
        if(this.tableData.length > 5) {
          this.tableData = this.tableData.slice(0,5)
        }
        this.pieData = this.array.map(item => {
          // if(item.num !== 0) {
            return {
              y: item.problemNum,
              name: item.problemName,
            }
          // }
        })
        this.pieData.map(item => {
          if(this.unSelectData.length !== 0) {
            this.unSelectData.map(select => {
              if(item.name == select) {
                 item.y = 0
              }
            })
          }
        })
        /**岗位 */
        var position = 0
        this.histogramData = res.data.岗位统计.map(item => {
          for(var positionName in item) {
            return {
              name: positionName,
              data: []
            }
          }
        })
        res.data.岗位统计.map(item => {
          for(var positionName in item) {
            var hesFactorNum = 0
            for(var hesF in item[positionName]) {
              if(this.unSelectData.length !== 0) {
                this.unSelectData.map(selectData => {
                  // delete item[positionName][selectData]
                  item[positionName][selectData] = 0
                })
                this.histogramData[position].data[hesFactorNum] = item[positionName][hesF]
                hesFactorNum++
              }
              else {
                this.histogramData[position].data[hesFactorNum] = item[positionName][hesF]
                hesFactorNum++
              }
            }
            position++
          }
        })
        this.drawPie()
        this.drawHistogram()
      })
    },
    displayTable() {
      if(this.isDisplayTable == false) {
        this.tableData = this.array
        this.isDisplayTable = !this.isDisplayTable
        this.buttonIcon = "el-icon-caret-top"
      }
      else{
        this.tableData = this.tableData.slice(0,5)
        this.isDisplayTable = !this.isDisplayTable
        this.buttonIcon = "el-icon-caret-bottom"
      }
    },
    drawPie() {
      Pie('pieChart', '问题对应要素', this.pieData)
    },
    drawHistogram() {
      Histogram('histogram', this.legendData, this.histogramData)
    },
    exportTable() {
      this.excelData = GetSeverityProblem(this.filterQueryExcel).then(() => {
        this.excelData = this.array
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['问题对应要素','问题数量（项）','百分比（%）'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['problemName','num','per'];
          const list = this.excelData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '问题对应要素excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
  }
}
</script>

<style>
.table {
  width: 60%;
  margin: auto;
  text-align: center;
}
th.gutter {
  display: table-cell!important;
}
</style>